//柱形图1
var mychart1;
var mychart2;
var mychart3;
var mychart4;
var option1;
var option2;
var option3;
var option4;
(function(){
    // 声明颜色数组
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6","red","rgb(2,33,139)","green","#F09393","#52E534","#C45290","#E0D3CE"];
    mychart1= echarts.init(document.querySelector('.bar .chart1'));
    option1 = {
        grid: {
            top: "1%",
            left: '22%',
            right:'10%',
            bottom: '5%',
        },
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: [{
            type: 'category',
            data: ["耐克运动鞋", "波斯登羽绒服", "阿迪短袖", "马丁靴", "雪碧","可乐","辣条","虾条","百乐钢笔","百乐墨水","橡皮","铅笔"],
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "#fff"
            }
        },
            {
                show: true,
                data: ['件', '件', '件', '件', '件','件','件','件','件','件','件','件'],
                inverse: true,
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                }
            }
        ],
        series: [{
            name: '条',
            type: 'bar',
            label:{
                show: true,
                position: "inside",
                formatter: "{c}"
            },
            data: [70, 34, 60, 78, 69,23,34,45,23,47,51,72],
            // yAxisIndex: 0,
            itemStyle:{
                barBorderRadius: 20,
                color: function(params){
                    //console.log(params);
                    return myColor[params.dataIndex];
                }
            },
            //柱子间的距离
            //barCategoryGap: 100,
            barWidth: 14
        }
            /*{
                name: '框',
                type: 'bar',
                barWidth: 16,
                barGap: '-100%',
                yAxisIndex: 1,
                itemStyle: {
                    color: "none",
                    barBorderRadius: 15,
                    borderWidth: 3,
                    borderColor: "#00c1de"
                },
                data: [100, 100, 100, 100, 100, 100, 100, 100,100, 100, 100, 100],
            }*/
        ]
    };
    mychart1.setOption(option1);
    //让图标自适应
    window.addEventListener("resize", function() {
        mychart1.resize();
    });
})();

//柱状图2
(function() {
    mychart2 = echarts.init(document.querySelector('.bar2 .chart'));
    var option2 = {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        //修改图表大小
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ["张三", "李四", "王五", "二麻子", "狗蛋", "杰克", "二层"],
            //修改坐标轴刻度线
            axisTick: {
                alignWithLabel: true
            },

            axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
            },
            //X坐标样式修改
            axisLine: {
                show: false,
            }
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12"
            },
            //y坐标样式修改
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    //width: 2
                }
            },
            //y轴分割线
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            }
        }],
        series: [{
            name: '购买数量',
            type: 'bar',
            barWidth: '40%',
            data: [70, 68, 61, 57, 54, 50, 45],
            itemStyle: {
                barBorderRadius: 5
            }
        }]
    };
    mychart2.setOption(option2);
    //让图标自适应
    window.addEventListener("resize", function() {
        mychart2.resize();
    });
})();


//热销商品
(function() {
    // 1. 实例化对象
    myChart4 = echarts.init(document.querySelector(".pie1  .chart"));
    // 2. 指定配置项和数据
    option4 = {
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#4d8884",
            "#ff9f7f",
            "#0096ff",
        ],
        series: [
            {
                name: "热销产品",
                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "80%"],
                center: ["50%", "42%"],
                roseType: "radius",
                data: [
                    { value: 410, name: "耐克运动鞋" },
                    { value: 250, name: "阿迪短袖" },
                    { value: 460, name: "可乐" },
                    { value: 600, name: "辣条" },
                    { value: 530, name: "铅笔" },
                ],
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 10,
                    // 连接到文字的线长度
                    length2: 10
                }
            }
        ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart4.setOption(option4);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart4.resize();
    });
})();


//提醒进货
(function(){
    mychart3 = echarts.init(document.querySelector('.bar3 .chart'));
    option3 = {
        //backgroundColor: '#011c3a',
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        //修改图表大小
        grid: {
            left: "0%",
            top: "30px",
            right: "0%",
            bottom: "0%",
            containLabel: true
        },
        xAxis: {
            data: ['马丁靴', '可乐', '辣条', '百乐钢笔'],
            axisLine: {
                lineStyle: {
                    color: '#0177d4'
                }
            },
            axisLabel: {
                color: '#fff',
                fontSize: 8,

            }
        },
        yAxis: {

            axisLine: {
                lineStyle: {
                    color: '#0177d4'
                }
            },
            axisLabel: {
                color: '#fff',
                fontSize: 16
            },
            splitLine: {
                show:false,
                lineStyle: {
                    color: '#0177d4'
                }
            },
            //interval:10,
            //max:100

        },
        series: [{
            type: 'bar',
            name:"现有数量",
            barWidth: '30%',
            itemStyle:{
                normal:{
                    color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00b0ff'
                    }, {
                        offset: 0.8,
                        color: '#7052f4'
                    }], false)
                }
            },
            data: [20, 30, 50, 10]
        }]
    };
    mychart3.setOption(option3);
    //让图标自适应
    window.addEventListener("resize", function() {
        mychart3.resize();
    });
})()

$(".btn-plan").click(function () {
    if ($(".showPlan").css("display") == "none") {
        $(".showPlan").css("display", "block");
        $(".showBuy").css("display", "none");
        $(".justSale").css("display", "none");
    } else {
        $(".showPlan").css("display", "none");
    }
});
$(".btn-buy").click(function () {
    if ($(".showBuy").css("display") == "none") {
        $(".showBuy").css("display", "block");
        $(".showPlan").css("display", "none");
        $(".justSale").css("display", "none");
    } else {
        $(".showBuy").css("display", "none");
    }
});
/*$(".btn-sale").click(function () {
    if ($(".justSale").css("display") == "none") {
        $(".justSale").css("display", "block");
        $(".showPlan").css("display", "none");
        $(".showBuy").css("display", "none");
    } else {
        $(".justSale").css("display", "none");
    }
});*/

//#region 折线图模块制作
// (function(){
//     var mychart=echarts.init(document.querySelector('.bar3 .chart'));
//     option = {
//         tooltip: {
//             trigger: 'axis'
//         },
//         legend: {
//             data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
//         },
//         grid: {
//             left: '3%',
//             right: '4%',
//             bottom: '3%',
//             containLabel: true
//         },
//         xAxis: {
//             type: 'category',
//             boundaryGap: false,
//             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//         },
//         yAxis: {
//             type: 'value'
//         },
//         series: [
//             {
//                 name: '邮件营销',
//                 type: 'line',
//                 stack: '总量',
//                 data: [120, 132, 101, 134, 90, 230, 210]
//             },
//             {
//                 name: '联盟广告',
//                 type: 'line',
//                 stack: '总量',
//                 data: [220, 182, 191, 234, 290, 330, 310]
//             }
//         ]
//     };
//     mychart.setOption(option);
// })()
//#endregion
